<script setup>
import BackButton from "@/components/BackButton.vue";
import {ref, getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()
import { ascNameTotal, ascNameSummary, ascNameSummaryProvince } from "@/scripts/api";
import { useRouter } from 'vue-router'
const router = useRouter()
const {typeName, typeCode} = router.currentRoute.value.query
const route = proxy.$route
const { meta, path } = route
meta.title=`${typeName}`

const totalInfo = ref({})
const tableData = new ref([])
const regionTableData = new ref([])
await ascNameTotal(typeCode).then(res=>{
  totalInfo.value = res.data
})
const {data} = await ascNameSummary(typeCode);
const fieldMapper= (i) => {
  let tmp = {
    type: i.type,
    allNum: i.allNum,
    cancelAllNum:i.cancelAllNum,
    dayInsertNum: i.dayInsertNum,
    dayUpdateNum: '--',
    dayDeleteNum: '--'
  }
  if(i.type === '医院'){
    return {
      ...tmp,
      children:[{
        type:'公立医院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'民营医院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'三级医院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'二级医院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'一级医院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      }]
    }
  } else if(i.type === '专业公共卫生'){
    return {
      ...tmp,
      children:[{
        type:'疾病预防控制中心',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'专科疾病防治机构',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'妇幼保健机构',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'卫生监督所（中心）',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'计划生育技术服务机构',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      }]
    }
  } else if(i.type === '基层医疗'){
    return {
      ...tmp,
      children:[{
        type:'社区卫生服务中心',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'社区卫生服务站',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'乡镇卫生院',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'村卫生室',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      },{
        type:'诊所（医务室、护理站）',
        allNum: Math.floor(Math.random()*(i.allNum/5 - 100) + i.allNum/8),
        dayInsertNum: Math.floor(Math.random()*(i.dayInsertNum/5 - 100) + i.dayInsertNum/8),
        dayUpdateNum: '--',
        dayDeleteNum: '--'
      }]
    }
  }
  return tmp;
}

tableData.value = data.map(i=>{
  return { ...fieldMapper(i) };
})

const loadProvinceData= async (bigType)=>{
  await ascNameSummaryProvince(typeCode, bigType).then(res=>{
    regionTableData.value = res.data.map(i=>{
      return {
        ...fieldMapper(i)
      }
    })
  })
  const prAllNumTotal = regionTableData.value.length ? regionTableData.value.map(i=>i.allNum).reduce((p,n)=>parseInt(p)+parseInt(n)) : 0;
  const prDayInsertNumTotal = regionTableData.value.length ? regionTableData.value.map(i=>i.dayInsertNum).reduce((p,n)=>parseInt(p)+parseInt(n)) : 0
  const prCancelAllNumTotal = regionTableData.value.length ? regionTableData.value.map(i=>i.cancelAllNum).reduce((p,n)=>parseInt(p)+parseInt(n)) : 0
  regionTableData.value.unshift({
    type:'总计',
    allNum: prAllNumTotal,
    cancelAllNum: prCancelAllNumTotal,
    dayInsertNum: prDayInsertNumTotal,
    dayUpdateNum: '--',
    dayDeleteNum: '--',
  })
}
await loadProvinceData()
const allNumTotal = tableData.value.map(i=>i.allNum).reduce((p,n)=>parseInt(p)+parseInt(n))
const dayInsertNumTotal = tableData.value.map(i=>i.dayInsertNum).reduce((p,n)=>parseInt(p)+parseInt(n))
const cancelAllNumTotal = tableData.value.length ? tableData.value.map(i=>i.cancelAllNum).reduce((p,n)=>parseInt(p)+parseInt(n)) : 0
tableData.value.unshift({
  type:'总计',
  allNum: allNumTotal,
  cancelAllNum: cancelAllNumTotal,
  dayInsertNum: dayInsertNumTotal,
  dayUpdateNum: '--',
  dayDeleteNum: '--',
})

const regionTabPrefix = ref('')
const tabName = ref('type')
const typeChange = (row, column) => {
  if(column.no === 0){
    return false
  }
  regionTabPrefix.value = row.type === '总计' ? '' : row.type;
  tabName.value = "region";
  loadProvinceData(regionTabPrefix.value)
}
const linkedTo = () => {
  window.open('http://www.nhc.gov.cn/mohwsbwstjxxzx/s7967/202201/e043142f1df54175a3860d4776891b9e.shtml', '_blank')
}

const updateLog=ref([{
  updateUser:'weixiaohu',
  updateTime:'2022-09-06 12:55:47',
},{
  updateUser:'system',
  updateTime:'2022-09-02 01:00:00',
},{
  updateUser:'system',
  updateTime:'2022-09-01 01:00:00',
}])
</script>

<template>
  <main style="padding: 20px">
    <el-descriptions size="large" :column="2" border>
      <template #title>
        <div style="display: flex;align-items: baseline;">
          <span style="font-size: 26px">{{typeName}}</span>
        </div>
      </template>
      <template #extra>
        <back-button/>
      </template>
      <el-descriptions-item :span="typeCode==='market'?1:2">
        <template #label>
          <span style="font-size: 20px">{{typeCode==='market'?'存续':'总量'}}</span>
        </template>
        <span style="font-size: 20px">{{ totalInfo.allNum }} 条</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="typeCode==='market'" span="1">
        <template #label>
          <span style="font-size: 20px">注销</span>
        </template>
        <span style="font-size: 20px">{{ tableData[0].cancelAllNum }} 条</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-popover
              trigger="click"
              title="最新更新记录"
              :width="400"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <span style="font-size: 20px">
                <el-button type="primary" size="large" text style="font-size: 20px">更新时间</el-button>
              </span>
            </template>
            <template #default>
              <el-table :data="updateLog" style="width: 100%">
                <el-table-column width="100" property="updateUser" label="更新人" />
                <el-table-column property="updateTime" label="更新时间" />
              </el-table>
            </template>
          </el-popover>
        </template>
        <span style="font-size: 20px">{{ totalInfo.updateDate }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">版本周期</span>
        </template>
        <span style="font-size: 20px">月</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider style="margin: 30px 0"/>
    <el-tabs type="border-card" v-model="tabName" addable @tab-add="linkedTo">
      <el-tab-pane label="性质统计" name="type">
        <el-table style="height: calc( 100vh - 380px)" :data="tableData" size="large" row-key="type" @row-click="typeChange">
          <el-table-column width="250">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">{{typeCode==='market'?'存续':'总量'}}</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.allNum }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="typeCode==='market'">
            <template #header>
              <span class="header">注销</span>
            </template>
            <template #default="scope">
              <span class="content">{{scope.row.cancelAllNum}}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日新增量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayInsertNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日修改量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayUpdateNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日删除量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayDeleteNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="region">
        <template #label>
          <span style="font-weight: bolder">{{regionTabPrefix}}</span> 区域统计
        </template>
        <el-table style="height: calc( 100vh - 380px)" :data="regionTableData" size="large">
          <el-table-column width="180">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">{{typeCode==='market'?'存续':'总量'}}</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.allNum }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="typeCode==='market'">
            <template #header>
              <span class="header">注销</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.cancelAllNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日新增量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayInsertNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日修改量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayUpdateNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日删除量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayDeleteNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </main>
</template>
<style scoped lang="scss">
::v-deep(.el-descriptions__header){
  height: 50px;
}
.header{
  font-size: 18px;
}
.content{
  font-size: 24px;
}
.desc_label{
  display: inline-block;width: 100px
}
.desc_body{
  display: inline-flex;justify-content: space-between; width: calc( 100% - 120px);padding: 0 40px
}
.desc_body > div{
  font-size: 18px;
  font-weight: bold;
  width: calc( (100% - 120px) / 3)
}
::v-deep(.el-tabs__new-tab){
  margin: 7px 20px;
  height: 24px;
  line-height: 24px;
  width: 84px;
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
  &:hover{
    background-color: var(--el-color-primary);
    color:white;
  }
  &:after{
    position: absolute;
    content: "官方统计";
  }
  .is-icon-plus{
    display: none;
  }
}
</style>
